<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Cell Bank</title>
    <link rel="stylesheet" type="text/css" href="../../static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/common.css">
    <link rel="stylesheet" type="text/css" href="../../static/css/jquery.tooltip.css">
    <script type="text/javascript" src="../../static/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../../static/js/bootstrap/bootstrap.min.js"></script>
    <!-- <script type="text/javascript" src="../../static/js/bootstrap-paginator.js""></script> -->
    <script type="text/javascript" src="../../static/js/jquery.twbsPagination.min.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" ></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"  ></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <!-- <link rel="stylesheet" href="../../static/css/index.css"> -->
<!--     <script type="text/javascript" src="./js/data-set.min.js"></script>
    <script type="text/javascript" src="./js/g2.min.js"></script> --> 

    <script type="text/javascript" src="../../static/js/Tooltip.js"></script>
    <!-- <script type="text/javascript" src="../../static/js/popper.js"></script> -->
    <style>
        .hole{
            border-collapse:separate;
            border-spacing:1.3rem;
        }
        .circle{
            /*border: 1px solid black;*/
            background-color: #ccc;
            height: 50px;
            border-radius: 15px;     
        }
         
        #list-Lanes,#list-Layers{
            /*width:45%;*/
            padding: 0;
            margin: 0;
        }
         
    </style>
   
     
  <style>
        .navbar{
            background-color: #ccc;
            color:white;
            height:45px;
            /*margin-top: -15px;*/
            margin-bottom: 10px;
        }
        .navbar a{
            color:#003366;
            font-size:18px;
        }
            
       /* #myTab> li:hover{
            margin-bottom: -2px;
            border-bottom: 2px solid red;
        }*/
        
         
 
        #myTab {
            margin:0 auto;
            margin-top: 60px;
            /*border: 1px solid red;*/
            /*padding-left: 130px;*/
            /*padding-right: 130px;*/
            /*border: 1px solid red;*/
            text-align: center;
        }
        #myTab li{
            padding:6px;
            width: 13%;
            /*border: 1px solid red;*/
        }
      /*div#item_1 { position: absolute; top: 50px; left: 50px; }*/
    </style>

</head>
<body >
    
     
    <nav class="navbar navbar-expand-lg  mt=0">
      <a class="navbar-brand" href="#"><img src="../../static/img/wuxian_logo.png" style="width:60px;" alt=""></a>
     
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="tube">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Entering</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Outgoing</a>
          </li> 
          <li class="nav-item">
            <a class="nav-link" href="records">Searching</a>
          </li> 
          <li class="nav-item">
            <a class="nav-link" href="#">Form</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">...</a>
          </li>
        </ul>
         <form class="form-inline my-2 my-lg-0 ml-auto">
          <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
          <button class="btn btn-outline-success my-2 my-sm-0 m-3" type="submit">User</button>
      </div>
    </nav>

    <ul class="nav nav-tabs container justify-content-between"  id="myTab">
      <li class="active"><a  id="tank_1" href="#tankContainer_1" data-toggle="tab" style="color:#000;"><img src="../../static/img/tank.png" style="width:40px; margin-right:6px;"  ><br> WX1</a></li>
      <li><a id="tank_2" href="#tankContainer_2" data-toggle="tab" style="color:#000;"><img src="../../static/img/tank.png" style="width:40px; margin-right:6px;" ><br> WX2</a></li>
      <li><a id="tank_3" href="#tankContainer_3" data-toggle="tab" style="color:#000;"><img src="../../static/img/tank.png" style="width:40px; margin-right:6px;" ><br> WX3</a></li>
      <li><a id="tank_4" href="#tankContainer_4" data-toggle="tab" style="color:#000;"><img src="../../static/img/tank.png" style="width:40px; margin-right:6px;" ><br> WX4</a></li>
      <li><a id="tank_5" href="#tankContainer_5" data-toggle="tab" style="color:#000;"><img src="../../static/img/tank.png" style="width:40px; margin-right:6px;" ><br> WX5</a></li>
      <li><a id="tank_6" href="#tankContainer_6" data-toggle="tab" style="color:#000;"><img src="../../static/img/tank.png" style="width:40px; margin-right:6px;" ><br> WX6</a></li>
      <!-- <li><a href="#tank5">WX5</a></li> -->
    </ul>
    <div class="row mt-2 " id="myTabContent">
        <div class="col-1"></div>

        <div class="col-2 my-3 row"  style=" padding: 0px;margin: 0px ">
            <div class="col-6 lanes" id="lanes" >
              <a class="list-group-item list-group-item-action active " id="lane_1"  >Lane1</a>
              <a class="list-group-item list-group-item-action" id="lane_2"  >Lane2</a>
              <a class="list-group-item list-group-item-action" id="lane_3"  >Lane3</a>
              <a class="list-group-item list-group-item-action" id="lane_4"  >Lane4</a>
              <a class="list-group-item list-group-item-action" id="lane_5"  >Lane5</a>
              <a class="list-group-item list-group-item-action" id="lane_6"  >Lane6</a>
            </div>
             <div class="col-6 layers" id="layers" >
              <a class="list-group-item list-group-item-action active " id="layer_1" >Layer1</a>
              <a class="list-group-item list-group-item-action" id="layer_2"  >Layer2</a>
              <a class="list-group-item list-group-item-action" id="layer_3"  >Layer3</a>
              <a class="list-group-item list-group-item-action" id="layer_4"  >Layer4</a>
              <a class="list-group-item list-group-item-action" id="layer_5"  >Layer5</a>
              <a class="list-group-item list-group-item-action" id="layer_6"  >Layer6</a>
              <a class="list-group-item list-group-item-action" id="layer_7"  >Layer7</a>
              <a class="list-group-item list-group-item-action" id="layer_8"  >Layer8</a>
              <a class="list-group-item list-group-item-action" id="layer_9"  >Layer9</a>
              <a class="list-group-item list-group-item-action" id="layer_10" >Layer10</a>
            </div>
        </div>

        <div class="col-8" >
            <table class="table hole tubes" id="tubes"></table>
        </div>   

        <div class="col-1"></div>
        

    </div>
             
 
<script type="text/javascript">

    $ = jQuery.noConflict();
      $(document).ready(function(){
        $tubes_dom = $("#tubes")
        $("#myTab>li").eq(0).css("border-bottom","1px solid red")
        refresh_tank(this)

        $ = jQuery.noConflict();
        $("#myTab>li").click(function(){
            refresh_tank(this)

        })



        $(".lanes>a").click(function(){
            refresh_tank(this)
            $(this).css("border-bottom" ,null ) 
        })
        $(".layers>a").click(function(){
            refresh_tank(this)
             $(this).css("border-bottom",null ) 
        })
      });


    function request_tubes_status(location) {
        jQuery.ajax(
        {
            type : 'get',               
            url : '/cellbank/tubes'+ '/' + location[0] + '/' + location[1] + '/' + location[2],
            error : function() 
            {
              alert('请求失败 ');
            },
            success : function(data) 
            {
              // alert(data);
              console.log(data);
              console.log(data[0].fields.tank_id);
              create_tubes(location, $tubes_dom, data)              
              // $('#tubes').html(data[0].fields.tank_id) ;

              // $('#tubes').html(data) ;
            }
        });
}

    function refresh_tank(this_pointer) {
        $ = jQuery.noConflict();
        $(this_pointer).parent().children().removeClass("active")
        $(this_pointer).parent().children().css("border-bottom","")
        $(this_pointer).addClass("active")
        $(this_pointer).css("border-bottom","1px solid red")
        console.log("ss")
        var location = get_active_location()
        // request_tubes_status(location)
        create_tubes(location, $tubes_dom, '')   
    }

    function get_active_location()
    {
        var location=[1,1,1];
        location[0] = $("#myTab li.active >a").attr("id").split("_")[1];
        location[1] = $("#lanes>a.active").attr("id").split("_")[1];
        location[2] = $("#layers>a.active").attr("id").split("_")[1];

        console.log(location)
        return location
    }  

    function create_tubes(location, $tubes_dom, tubes_data)
    {
        var tank_id=location[0], lane_id=location[1], layer_id=location[2];
        $tubes_dom.html("")
        tube_content  = $tubes_dom

        console.log(tank_id+"kk");
        console.log(lane_id)
        console.log(layer_id)

        cell_info = [
          {'Cell Name': '1006A-04-M10', 'Freeze Time':'2019-07-17', 'Recorder':'jhplyy', 'Recorder Date':'2019-07-17', 'Reviewer':'jsplyy', 'Reviewer Date':'2019-07-18'},
          {'Cell Name': '1003A-04-M5', 'Freeze Time':'2019-07-18', 'Recorder':'jhplyy', 'Recorder Date':'2019-07-18', 'Reviewer':'jsplyy', 'Reviewer Date':'2019-07-18'},
          {'Cell Name': '1009A-04-M6', 'Freeze Time':'2019-08-17', 'Recorder':'jhplyy', 'Recorder Date':'2019-08-17', 'Reviewer':'jsplyy', 'Reviewer Date':'2019-08-17'},
          {'Cell Name': '1004A-04-M7', 'Freeze Time':'2019-09-23', 'Recorder':'jhplyy', 'Recorder Date':'2019-09-23', 'Reviewer':'jsplyy', 'Reviewer Date':'2019-09-23'},
          {'Cell Name': '1002A-04-M8', 'Freeze Time':'2019-09-17', 'Recorder':'jhplyy', 'Recorder Date':'2019-09-17', 'Reviewer':'jsplyy', 'Reviewer Date':'2019-09-17'},
          {'Cell Name': '1009A-04-M2', 'Freeze Time':'2019-10-07', 'Recorder':'jhplyy', 'Recorder Date':'2019-10-07', 'Reviewer':'jsplyy', 'Reviewer Date':'2019-10-07'},
        ]
        for (x = 0; x < 9; x++) { 
            $tr = $('<tr></tr>')
            for (y = 1; y < 10; y++) {
                random_key = (x + y + tank_id + lane_id + layer_id) % 6
                if (Math.abs(y-x) == random_key) {
                  $td = $('<td ></td>').addClass("circle").addClass("item")
                  // .text(tubes_data[x*9+y-1].fields.used )
                  $td.css('background-color','#FF8C69')

                  let html=' ';
                   for(let key in cell_info[random_key]){
                      html += key + ' : ' +cell_info[random_key][key]+'<br/>';
                  }
                  $tips_div = $('<div style="display:none" ' + 'title=Cell_Name:' + cell_info[random_key]['Cell Name'] + '></div>').addClass("tooltip_description").html(html)
                  $td.append($tips_div)                  
                }
                else
                {
                  
                  $td = $('<td ></td>').addClass("circle")
                  // .text(tubes_data[x*9+y-1].fields.used )
                  $td.css('background-color','#BCEE68')
                }


                $tr.append($td)
            }

            tube_content.append($tr)
        }

      $j = jQuery.noConflict();
      $j("td.item").tooltip();
    }

        
</script>

    
</body>
</html>